package com.example.basic_components.TextField

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import com.example.basic_components.R

//visualTransformation 可以帮助我们应用输入框的显示模式
@Composable
fun VisualTransformationDemo() {
    var text by remember { mutableStateOf("") }
    var passwordHidden by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        TextField(
            value = text,
            onValueChange = { text = it },
            label = {
                Text(text = "Password")
            },
            trailingIcon = {
                IconButton(
                    onClick = { passwordHidden = !passwordHidden }
                ) {
                    Icon(
                        painter = painterResource(id = R.drawable.visibility),
                        contentDescription = null
                    )
                }
            },
            visualTransformation = if(passwordHidden) PasswordVisualTransformation() else VisualTransformation.None
        )
    }
}